<template>
<<<<<<< HEAD
    <div class="standardInfo">
        <van-search
            v-model="searchvalue"
            shape="round"
            background="#39a9ed"
            placeholder="请输入搜索关键词"
        />
        <!-- <van-tree-select
            :items="items"
            :active-id.sync="activeIds"
            :main-active-index.sync="activeIndex"
            /> -->
            <el-tree 
                ref="tree"
                :filter-node-method="filterNode"
                :default-expand-all='true'
                id='unSchTree'
                node-key="id" 
                show-checkbox 
                :data="items" 
                :props="defaultProps"
                :check-on-click-node='true'
                :check-strictly='true'
                @check-change="handleCheckChange"
            ></el-tree>
        <div class='standardInfoBtn' @click="submit">确定</div>
    </div>
</template>

<script>
import {
    getchecktree
} from '@/api/standardInfo'
import { Tree} from 'element-ui';
import { 
    Button
    ,DropdownMenu
    , DropdownItem
    ,Icon 
    ,TreeSelect
    ,Search } from 'vant';
export default {
    name: 'standardInfo',
    components: {
        [Icon.name]:Icon,
        [Button.name]:Button,
        [DropdownMenu.name]:DropdownMenu,
        [DropdownItem.name]:DropdownItem,
        [TreeSelect.name]:TreeSelect,
        [Search.name]:Search,
        [Tree.name]:Tree,
    },
    watch: {
        searchvalue(val) {
            this.$refs.tree.filter(val);
        }
    },
    data () {
        return {
              defaultProps: {
          children: 'children',
          label: 'label'
        },
            searchvalue:'',
            activeIds: [],
            activeIndex: 0,
            items:[],
            names:[]
        }
    },
    created(){
        this.getDataInfo()
   
    },
    methods:{
        filterNode(value, data) {
            if (!value) return true;
            return data.label.indexOf(value) !== -1;
        },
        handleNodeClick(data) {
         console.log(data);
        },
        handleCheckChange(data, checked, indeterminate) {
            console.log(data);
        },
        getDataInfo(){
            getchecktree({
                fcustomerid:'c5f0d33b-ac05-4acd-b8bb-a01226565543',
                fproductid:'1',
                fproductname:'牛初乳',
                searchvalue:this.searchvalue
            }).then(res=>{
                if(res.isSuccess){
                    this.items = res.list 
                    if(this.$route.query.ids){
                        this.activeIds = this.$route.query.ids.split(',')
                        this.$nextTick(()=>{
                            this.$refs.tree.setCheckedKeys(this.activeIds);
                        })
                    }
                }
            })
        },

        submit(){
            this.activeIds = this.$refs.tree.getCheckedKeys()
            this.names = this.$refs.tree.getCheckedNodes().map(function(item) {
                return item.label
            });
            this.$router.push({path:"/addProduct2",query:{ids:this.getTextByJs(this.activeIds),names:this.getTextByJs(this.names)}});
        },
        getTextByJs(arr) {
            var str = "";
            for (var i = 0; i < arr.length; i++) {
                str += arr[i]+ ",";
            }
            if (str.length > 0) {
                str = str.substr(0, str.length - 1);
            }
            return str;
        }
    }
}
=======
  <div class="standardInfo">
    <van-search v-model="searchvalue" shape="round" background="#39a9ed" placeholder="请输入搜索关键词" />
    <el-tree
      ref="tree"
      :filter-node-method="filterNode"
      :default-expand-all="true"
      id="unSchTree"
      node-key="id"
      show-checkbox
      :data="items"
      :props="defaultProps"
      :check-on-click-node="true"
      :check-strictly="true"
      @check-change="handleCheckChange"
    ></el-tree>
    <div class="standardInfoBtn" @click="submit">确定</div>
  </div>
</template>

<script>
import { getchecktree } from "@/api/standardInfo";
import { Tree } from "element-ui";
import {
  Button,
  DropdownMenu,
  DropdownItem,
  Icon,
  TreeSelect,
  Search
} from "vant";
export default {
  name: "standardInfo",
  components: {
    [Icon.name]: Icon,
    [Button.name]: Button,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [TreeSelect.name]: TreeSelect,
    [Search.name]: Search,
    [Tree.name]: Tree
  },
  watch: {
    searchvalue(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      defaultProps: {
        children: "children",
        label: "label"
      },
      searchvalue: "",
      activeIds: [],
      activeIndex: 0,
      items: [],
      names: []
    };
  },
  created() {
    this.getDataInfo();
  },
  methods: {
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    handleNodeClick(data) {
      console.log(data);
    },
    handleCheckChange(data, checked, indeterminate) {
      console.log(data);
    },
    getDataInfo() {
      getchecktree({
        fcustomerid: "306440c2-6417-487f-962e-e12fc144a351",
        fproductid: "1",
        fproductname: "牛初乳",
        searchvalue: this.searchvalue
      }).then(res => {
        if (res.isSuccess) {
          this.items = res.list;
          if (this.$route.query.ids) {
            this.activeIds = this.$route.query.ids.split(",");
            this.$nextTick(() => {
              this.$refs.tree.setCheckedKeys(this.activeIds);
            });
          }
        }
      });
    },

    submit() {
      this.activeIds = this.$refs.tree.getCheckedKeys();
      this.names = this.$refs.tree.getCheckedNodes().map(function(item) {
        return item.label;
      });
      this.$router.push({
        path: "/addProduct2",
        query: {
          ids: this.getTextByJs(this.activeIds),
          names: this.getTextByJs(this.names)
        }
      });
    },
    getTextByJs(arr) {
      var str = "";
      for (var i = 0; i < arr.length; i++) {
        str += arr[i] + ",";
      }
      if (str.length > 0) {
        str = str.substr(0, str.length - 1);
      }
      return str;
    }
  }
};
>>>>>>> zcm
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
<<<<<<< HEAD
.van-sidebar-item--select{
    border-color: #39a9ed;
}
.van-tree-select__item--active{
    color: #39a9ed;
}
.standardInfoBtn{
    line-height: 40px;
    width:100%;
    text-align: center;
    position: fixed;
    bottom: 0;
    left:0;
    background-color: #1989fa;
    color:white;  
}
#unSchTree .el-tree-node .expanded + .el-checkbox .el-checkbox__inner{
    display: none;
}
#unSchTree .el-tree-node  .el-checkbox .el-checkbox__inner{
    display: none;
}
#unSchTree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner{
    display: inline-block;
}
#unSchTree .el-tree-node__content {
    height: 30px;
    line-height: 30px
}
.el-checkbox .el-checkbox__inner{
display: inline-block;
=======
.van-sidebar-item--select {
  border-color: #39a9ed;
}
.van-tree-select__item--active {
  color: #39a9ed;
}
.standardInfoBtn {
  line-height: 40px;
  width: 100%;
  text-align: center;
  position: fixed;
  bottom: 0;
  left: 0;
  background-color: #1989fa;
  color: white;
}
#unSchTree .el-tree-node .expanded + .el-checkbox .el-checkbox__inner {
  display: none;
}
#unSchTree .el-tree-node .el-checkbox .el-checkbox__inner {
  display: none;
}
#unSchTree .el-tree-node .is-leaf + .el-checkbox .el-checkbox__inner {
  display: inline-block;
}
#unSchTree .el-tree-node__content {
  height: 30px;
  line-height: 30px;
}
.el-checkbox .el-checkbox__inner {
  display: inline-block;
>>>>>>> zcm
}
</style>
